<template>
    <a-drawer
            :title="title"
            :maskClosable="true"
            :width="drawerWidth"
            placement="right"
            :closable="true"
            @close="handleCancel"
            :visible="visible"
            style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">

        <template slot="title">
            <div style="width: 100%;">
                <span>{{ title }}</span>
                <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
                  <a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
                </span>
            </div>

        </template>

        <a-spin :spinning="confirmLoading">
            <a-form :form="form">

                <a-form-item label="id" v-show="false" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input v-decorator.trim="[ 'id']" :readOnly="true"/>
                </a-form-item>

                <a-form-item label="映射域名称" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                    <a-input placeholder="请输入源配置名称" v-decorator.trim="[ 'name', validatorRules.name]" />
                </a-form-item>

                <a-form-item label="映射域描述" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-textarea placeholder="请输入描述" v-decorator.trim="[ 'note']"/>
                </a-form-item>
            </a-form>
        </a-spin>

        <div class="drawer-bootom-button" v-show="!disableSubmit">
            <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
                <a-button style="margin-right: .8rem">取消</a-button>
            </a-popconfirm>
            <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
        </div>
    </a-drawer>
</template>

<script>
    import $api from '../api'
    import { commonModalMixin } from '@/views/codeGenerator/mixin/commonModalMixin'
    export default {
        name: "SourceConfigModal",
        mixins: [ commonModalMixin ],
        components: {
        },
        data () {
            return {
                api: $api, //配置属性
                validatorRules: { //验证规则  固有属性
                    name: {
                        rules: [{
                            required: true, message: '请输入配置名称!'
                        }]
                    },
                    sourceId: { rules: [{ required: true, message: '请选择对象id!' }] }
                },
                url: { //资源链接，固有属性
                    add: 'codeGenerator/generatorTemplateGroup/add', //配置属性
                    edit: 'codeGenerator/generatorTemplateGroup/edit' //配置属性
                }
            }
        },
        created () {
        },
        methods: {
        }
    }
</script>

<style scoped>
    .avatar-uploader > .ant-upload {
        width:104px;
        height:104px;
    }
    .ant-upload-select-picture-card i {
        font-size: 49px;
        color: #999;
    }

    .ant-upload-select-picture-card .ant-upload-text {
        margin-top: 8px;
        color: #666;
    }

    .ant-table-tbody .ant-table-row td{
        padding-top:10px;
        padding-bottom:10px;
    }

    .drawer-bootom-button {
        position: absolute;
        bottom: -8px;
        width: 100%;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        left: 0;
        background: #fff;
        border-radius: 0 0 2px 2px;
    }
</style>
